<template>
  <view class="wrapper">
    <view class="nav" :style="{paddingTop: statusbarHeight + 'px'}">
      <view class="title">
        <view class="back" @click="back">
          <u-icon name="arrow-left" color="#333" size="18px"></u-icon>
        </view>
        <text class="text">我的团队</text>
      </view>
      <view class="tab">
        <u-subsection
            mode="subsection"
            bgColor="#f7f8f9"
            inactiveColor="#666666"
            activeColor="#00A49C"
            :list="tabs"
            @change="changeIndex"
            :current="current"
            fontSize="24rpx"></u-subsection>
      </view>
    </view>
    <view class="list" v-if="list.length > 0">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="image">
          <!--<u-avatar :src="item.avatar" size="100"></u-avatar>-->
          <u-avatar :src="item.avatar" size="150" v-if="item.av * 1 === 0"></u-avatar>
          <u-avatar :src="baseUrl + item.avatar" size="150" v-else></u-avatar>
          <!--<u&#45;&#45;image-->
          <!--    lazy-load width="160rpx"-->
          <!--    height="160rpx"-->
          <!--    :fade="true" duration="450"-->
          <!--    :src="item.avatar"-->
          <!--    v-if="item.avatar"></u&#45;&#45;image>-->
        </view>
        <view class="desc">
          <view class="level" v-if="item.level0">{{item.level0.display}}</view>
          <view class="nickname">昵称: {{ item.nickname }}</view>
          <view class="mobile">电话: {{ item.mobile | mobileText }}</view>
          <view class="time">注册时间: {{ item.create_time }}</view>
        </view>
      </view>
    </view>
    <view class="list nothing" v-else>
      暂无相关信息...
    </view>
    <arrow />
    <u-back-top bottom="80" right="40" :scroll-top="scrollTop" icon="arrow-up" :customStyle="{'opacity': '0.99'}"></u-back-top>
  </view>
</template>

<script>
import Arrow from '../../components/arrow'
import config from '../../config/config'
import base64 from '../../util/base64'
import Service from '../../api/service'
const serviceModel = new Service()

export default {
  components: {
    Arrow
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  filters: {
    mobileText(v) {
      if (v.length === 11) {
        return v ? v.substring(0, 3) + '****' + v.substring(7) : ''
      }
      return ''
    }
  },
  data() {
    return {
      scrollTop: 0,
      baseUrl: config.baseUrl,
      tabs: ['全部', '直推', '间推'],
      current: 0,
      list: [],
      queryList: {
        page: 0,
        pageSize: 10,
        busy: false
      },
      statusbarHeight: 0,
    }
  },
  onPullDownRefresh() {
    this.queryList = {
      page: 0,
      pageSize: 10,
      busy: false
    }
    this.getList()
  },
  onReachBottom() {
    this.getList(true)
  },
  onLoad(options) {
    uni.getSystemInfo({
      success: res => {
        this.statusbarHeight = res.statusBarHeight
      }
    })
    const index = +options.type || 0
    this.current = index
    this.getList()
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    changeIndex(index) {
      this.current = index
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
      this.getList()
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        serviceModel.teamList({
          ...this.queryList,
          type: this.current
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
          uni.stopPullDownRefresh();
          // console.log(this.list)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding-bottom: 20px;
  .nav {
    background: white;
    z-index: 99999;
    position: sticky;
    top: 0;
    .title {
      height: 44px;
      background: white;
      display: flex;
      align-items: center;
      .back {
        width: 44px;
        display: flex;
        justify-content: center;
      }
      .text {
        flex: 1;
        text-align: center;
        font-weight: 700;
        margin-left: -44px;
      }
    }
    .tab {
      background: white;
      height: 35px;
      padding: 5px 10px;
      position: sticky;
      top: 0;
    }
  }
  .list {
    margin: 20rpx;
    min-height: 100px;
    //padding: 20rpx;
    //background: white;
    font-size: 24rpx;
    //border-radius: 10rpx;
    .item {
      background: white;
      padding: 20rpx;
      border-radius: 10rpx;
      margin-bottom: 10px;
      display: flex;
      .image {
        width: 160rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .desc {
        flex: 1;
        padding-left: 10px;
        //background: red;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 75px;
        .level {
          font-weight: 700;
        }
        .time {
          color: #ccc;
        }
      }
    }
  }
  .nothing {
    color: #ccc;
    line-height: 100px;
    background: white;
    text-align: center;
  }
}
</style>
